<!doctype html><html><head>
    <title>Canvas Art gallery</title>
    <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
    <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
    <style type="text/css">
      body { background: 0 -100px repeat-x url(img/bg_gallery.png) #4F191A; margin:10px; }
      img { display:none; }
      table { margin: 0 auto; }
      td { padding:15px; }
    </style>
<script src="../canvas.vml.js"></script>
<script src="../canvas.js"></script>

<script>

/*
function switchBackend() {
    var n = window.name || "";

    if (!n) {
        window.name = "flash";
    } else {
        switch (n) {
        case "sl":      window.name = "flash"; break;
        case "flash":   window.name = "vml"; break;
        case "vml":     window.name = "sl"; break;
        }
    }
    location.reload(false);
}
 */

function oncanvasready() {
/*
    if (window.name === "vml") {
        document.title = "Backend: VML";
    } else if (window.name === "flash") {
        document.title = "Backend: Flash";
    } else if (window.name === "sl") {
        document.title = "Backend: Silverlight";
    } else {
        document.title = "Native Canvas";
    }
 */

    // Loop through all img
    for (var i=0;i<document.images.length;i++){

        // Don't add a canvas for the frame image
        if (document.images[i].getAttribute('id')!='frame'){

            (function(i) {
                var div = document.createElement("div");

                // Insert before the image
                document.images[i].parentNode.insertBefore(div, document.images[i]);

                // swap canvas
                var canvas = window.Canvas(132, 150, window.name || "sl", div);

                var ctx = canvas.getContext('2d');
                // Draw image to canvas
                ctx.drawImage(document.images[i],15,20);
                // Add frame
                ctx.drawImage(document.getElementById('frame'),0,0);

            })(i);
        }
    }
}
</script>

  </head>
  <body>
<!--
    <input type="button" value="sl/flash/vml" onclick="switchBackend()" />
 -->

    <table>
      <tr>
        <td><img src="img/gallery_1.jpg"></td>
        <td><img src="img/gallery_2.jpg"></td>
        <td><img src="img/gallery_3.jpg"></td>
        <td><img src="img/gallery_4.jpg"></td>
      </tr>
      <tr>
        <td><img src="img/gallery_5.jpg"></td>
        <td><img src="img/gallery_6.jpg"></td>
        <td><img src="img/gallery_7.jpg"></td>
        <td><img src="img/gallery_8.jpg"></td>
      </tr>
    </table>
    <img src="img/picture_frame.png" width="132" height="150" id="frame">
  </body>
</html>
